<template>
	<div class="system-add-menu-container">
		<el-dialog :title="'新增接口'" :model-value="props.modelValue" width="769px" :before-close="handleClose">
			<el-form :model="ruleForm" size="default" label-width="80px">
				<el-row :gutter="35">
					<el-col class="mb20">
						<el-form-item label="接口名称">
							<el-input v-model="ruleForm.name" placeholder="格式：xxxx" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="接口分组">
							<el-cascader
								:options="groupData"
								:props="{ value: 'id', label: 'name' }"
								placeholder="请选择分组"
								clearable
								class="w100"
								v-model="ruleForm.pid"
							>
							</el-cascader>
						</el-form-item>
					</el-col>

					<el-col class="mb20">
						<el-form-item label="接口路由">
							<el-input v-model="ruleForm.apis" placeholder="路由中的 name 值" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col class="mb20">
						<el-form-item label="接口类型">
							<el-radio-group v-model="ruleForm.method">
								<el-radio label="get">get</el-radio>
								<el-radio label="post">post</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>

					<el-col class="mb20">
						<el-form-item label="接口描述">
							<el-input v-model="ruleForm.content" placeholder="接口描述" clearable type="textarea"></el-input>
						</el-form-item>
					</el-col>

					<el-col>
						<el-form-item label="排序">
							<el-input-number v-model="ruleForm.sort" controls-position="right" placeholder="请输入排序" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="systemAddMenu">
import { addApi } from '@/api/system/api';
import { ElMessage } from 'element-plus';

import { getApiGroupList } from '@/api/system/api';

const emits = defineEmits(['update:modelValue', 'refresh']);
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
});

const groupData = ref([]);
const getApiGroupLists = async () => {
	let res = await getApiGroupList(null, false);
	if (res.code === 0) {
		groupData.value = res.data.data;
	}
};
getApiGroupLists();

const ruleForm = reactive({
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	pid: [], // 分组id
	name: '', // 接口名称
	apis: '', // 路由
	method: 'get', // 请求类型
	content: '', //描述
	sort: 0, // 排序
});

// 新增/编辑
const onSubmit = async () => {
	console.log(ruleForm);
	ruleForm.pid = ruleForm.pid[0];
	let res = await addApi(ruleForm);
	// console.log(res);
	if (res.code === 0) {
		ElMessage.success(res.message);
		handleClose(); // 关闭弹窗
		emits('refresh');
	} else {
		ElMessage.error(res.message);
	}
};

// 关闭弹窗
const handleClose = () => {
	emits('update:modelValue', false);
};
</script>
